<template>
  <div class="teacher">
    <div class="introduce">
      <div class="back">
        <ul class="introduce-ul">
        <li v-for="val in arrList" :key="val.t_id" :class="cid === val.t_id? 'active': ''" @click="showData(val.t_id)">
          <div>
            <img :src="val.t_imageurl" alt="">
            <p>NAME</p>
          </div>
        </li>
        </ul>
      </div>
      <div class="t_famousurl">
        <div v-for="val in arrList" :key="val.t_id" :class="{'current': cid!==val.t_id}">
          <img :src="val.t_famousurl" v-if="val.t_id === cid"/>
        </div>
      </div>
      <!-- 作品节选 -->
      <div class="excerpts">
        <div class="line">
          <span></span>
          <h2>作品节选</h2>
        </div>
        <ul class="excerpts-ul" ref="altitude">
          <li v-for="val in arrList2" :key="val.t_id">
            <img :src="val.t_teacher_imgurl" alt="">
          </li>
        </ul>
      </div>
      <div class="more">
        <a href="javascript:;" @click="toLoad">加载更多</a>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { tr } from 'element-plus/es/locale/index.js';
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const arrList = ref(null)
const cid = ref(null)
const arrList2 = ref([])
const arrList3 = ref(null)
const arrList4 = ref([])
const altitude = ref(null)
proxy.$http.get('https://yami.h5.yscase.com/yanjia/teacher/list').then(val => {
  arrList.value = val.data.data
  cid.value = arrList.value[0].t_id
  console.log(cid.value)
  data(cid.value)
})
function data (cid) {
  proxy.$http.get('https://yami.h5.yscase.com/yanjia/teacher/works?teacher_id=' + cid + '').then(val => {
  arrList3.value = val.data.data
  // console.log(val.data.data)
  val.data.data.some((val, i) => {
    if (i === 30) {
      return true
    }
    arrList2.value.push(val)
    arrList4.value.push(val)
    return false
  })
  console.log(arrList2.value)
})
}
function showData (id) {
  flag.value = true
  cid.value = id
  arrList2.value = arrList4.value
  proxy.$refs.altitude.style.height = '1045px'
}
const flag = ref(true)
function toLoad () {
  if (flag.value) {
    arrList2.value = arrList3.value
    console.log(proxy.$refs.altitude)
    proxy.$refs.altitude.style.height = '3000px'
    flag.value = false
  } else {
    alert('没有更多了喔')
  }
}

</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.teacher {
  background-color: #f4f4f4;
}
.line {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  span {
    display: block;
    width: 8px;
    height: 46px;
    background-color: #353535;
    margin-right: 10px;
  }
  h2 {
    font-size: 40px;
    line-height: 40px;
    color: #353535;
    font-weight: 500;
  }
}
.introduce {
  overflow: hidden;
  width: 100%;
  .back {
    width: 100%;
    background-color: #373739;
  }
  .introduce-ul {
    width: 740px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    height: 150px;
    .active {
      background-color: #2b2b2d;
    }
    li {
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 150px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: block;
        margin-top: 10px;
      }
      p {
        font-size: 16px;
        color: #aaa;
        line-height: 16px;
        margin-top: 8px;
      }
    }
  }
  .t_famousurl {
    width: 100%;
    height: 640px;
    .current {
      height: 0;
    }
    div {
      width: 100%;
      height: 640px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .excerpts {
    background-color: #f4f4f4;
    box-sizing: border-box;
    padding: 40px 330px 0;
    .excerpts-ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      height: 1045px;
      align-items: center;
      li {
        width: 200px;
        height: 200px;
        list-style: none;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .more {
    width: 300px;
    height: 67px;
    background: #202022;
    margin: 55px auto 100px;
    a {
      text-align: center;
      line-height: 67px;
      font-size: 21px;
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>
